<template>
  <div>
    <cardTool>
      <!-- 头部 -->
      <template #headerDiy>
        <el-row class="header-box" type="flex" justify="space-between">
          <!-- 左 -->
          <el-button size="small" type="primary" @click="addFn">添加分类</el-button>
          <!-- 右 -->
          <el-input v-model="seaData" placeholder="请输入内容" style="width:500px">
            <el-button slot="append" icon="el-icon-search" @click="seaFn" />
          </el-input>
        </el-row>
      </template>
      <!-- 主体 -->
      <template #body>
        <!-- 表格 -->
        <el-table
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="image"
            label="图片"
            width="180"
          >
            <template v-slot="{row}">
              <img v-imgErr="require('../../assets/nvren.jpg')" :src="row.image" style="height:100px;width: 100px;">
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
          />
          <el-table-column
            prop="desc"
            label="介绍"
          />
          <el-table-column
            label="操作"
            width="180"
          >
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center" style="margin-top:20px">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="page"
            :total="total"
            :current-page.sync="curpage"
            @current-change="currentPage"
          />
        </el-row>
      </template>
    </cardTool>
    <!-- 弹窗 -->
    <classifyDialog
      ref="classifyDialog"
      :dialog-visible.sync="isShow"
      :table-data="tableData"
      @getnewList="getclassifyList"
      @upmax="upmax"
    />
  </div>
</template>

<script>
import classifyDialog from './components/classify-Dialog.vue'
import { delAclassifyByid, getAclassifyByid, getAclassifyList, getAclassifyListTotal } from '@/api/classify'
export default {
  components: {
    classifyDialog
  },
  data() {
    return {
      tableData: [],
      limit: '3', // 每页的获取条数
      start: '0', // 开始获取的位置
      total: 0, // 列表总数量
      page: 3, // 分页器每页显示条数
      isShow: false, // 弹窗显示
      seaData: '', // 搜索框数据
      curval: 1,
      curpage: 1 // 初始页数
    }
  },
  async created() {
    // 获取最新列表数据
    await this.getclassifyList()
  },
  methods: {
    headerCellStyle() {
      return 'text-align:center'
    },
    cellStyle() {
      return 'text-align:center'
    },
    // 获取列表总数量
    async getListTotal() {
      const res = await getAclassifyListTotal()
      this.total = res.data
    },
    // 获取初始列表数据
    async getclassifyList() {
      const res = await getAclassifyList({
        _limit: this.limit,
        _start: this.start
      })
      this.tableData = res.data
      await this.getListTotal()
    },
    // 分页功能
    currentPage(val) {
      this.curval = val
      this.start = val * this.limit - this.limit
      this.getclassifyList()
    },
    // 删除功能
    async delFn(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用删除接口
        await delAclassifyByid(id)
        if (this.tableData.length === 1) {
          this.curval--
          this.start = this.curval * this.limit - this.limit
          await this.getclassifyList()
        } else {
          await this.getclassifyList()
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 显示添加弹窗
    addFn() {
      this.isShow = true
    },
    // 编辑功能
    async editFn(id) {
      // 显示弹窗
      this.isShow = true
      // 调用接口实现数据回显
      const res = await getAclassifyByid(id)
      this.$refs.classifyDialog.formDate = res.data
      this.$refs.classifyDialog.imges1(res.data.image)
    },
    // 搜索功能
    async seaFn() {
      if (this.seaData) {
        const res = await getAclassifyList({
          _limit: '1000',
          _start: '0'
        })
        // 遍历数组
        // const arrl = res.data.filter(item => item.title === this.seaData)
        // console.log(154, arrl)
        // this.tableData = arrl
        const newArr = []
        res.data.forEach(item => {
          if (item.title.indexOf(this.seaData) !== -1) {
            newArr.push(item)
          }
        })
        this.tableData = newArr
        this.total = newArr.length
      } else {
        this.getclassifyList()
        this.getListTotal()
      }
    },
    // 添加最后条时触发
    // 总共 9 条
    // 每页 3
    async upmax() {
      // 获取数据的当前页
      this.curval++
      // 分页器但前页
      const pa = this.total / this.tableData.length + 1
      this.curpage = parseInt(pa)
      console.log('当前页', this.curpage)
      // 将获取参数改为下一页
      this.start = this.curval * this.limit - this.limit
      // 获取列表-获取总数量
      await this.getclassifyList()
      console.log('当前页2', this.curpage)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 头部盒子 */
</style>
